<template>
  <div class="tagbar">
    <!-- active-class 属于vue-router的样式方法，当routerlink标签被点击时将会应用这个样式 -->
    <router-link
      class="tab-item"
      v-for="(item,index) in data"
      :key="index"
      :to="item.path"
      active-class="is-selected"
    >
      <!-- 图标 -->
      <div class="tab-item-icon">
        <i :class="'fa fa-'+item.icon"></i>
      </div>
      <!-- 内容 -->
      <div class="tab-item-label">{{item.title}}</div>
    </router-link>
  </div>
</template>
<script>
export default {
  name: "tableBar",
  props: {
    data: Array
  }
};
</script>
<style scoped>
.tagbar {
  display: flex;
  width: 100%;
  height: 45px;
  background-color: rgb(167, 208, 190);
  /* position: relative; */
  justify-content: center;
  align-content: center;
  position: absolute;
  top: 94%;
  transform: translateY(-50%);
  /* padding: 30px 0; */
  border-top: 1px solid #fff;
}
.tagbar a .tab-item-icon,
.tagbar a .tab-item-label {
  padding: 3px 48px;
  text-align: center;
  flex: 1;
}
.is-selected {
  height: 100%;
  color: rgb(205, 58, 117);
}
</style>